<template>
  <div ref="amapEl" class="h-[400px] w-[500px]"></div>
</template>

<script setup>
const amapEl = ref(null)
let map = null

onMounted(() => {
  map = new AMap.Map(amapEl.value, { zoom: 12 });
  map.add(new AMap.TileLayer.Satellite());
  const markerContent = `<div style="color:red">marker</div>`;
  const position = new AMap.LngLat(114.0683, 22.5455);
  const marker = new AMap.Marker({
    position: position,
    content: markerContent,
    offset: new AMap.Pixel(-3, -3),
  });
  map.add(marker);

  amapEl.value.addEventListener("wheel", (e) => {
    e.stopPropagation();
  });
});

onUnmounted(() => {
  map?.destroy();
});
</script>